<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="心理测评量表 - 专业的心理健康评估工具">
    <meta name="keywords" content="心理测评,心理健康,量表,评估">
    <title>{% block title %}心理测评量表{% endblock %}</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css" rel="stylesheet">
    
    <!-- 自定义样式 -->
    <style>
        :root {
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --light-bg: #f8f9fa;
            --border-color: #dee2e6;
        }
        
        * {
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--light-bg);
            color: #333;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }
        
        .navbar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
            color: white !important;
        }
        
        .navbar-nav .nav-link {
            color: rgba(255,255,255,0.9) !important;
        }
        
        .navbar-nav .nav-link:hover {
            color: white !important;
        }
        
        .main-container {
            min-height: calc(100vh - 120px);
            padding: 2rem 0;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .card {
            border: none;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-radius: 12px;
            transition: all 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .btn {
            border-radius: 8px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            border: none;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
            transform: translateY(-1px);
        }
        
        .form-control {
            border-radius: 8px;
            border: 2px solid var(--border-color);
            padding: 0.75rem 1rem;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        
        .progress {
            height: 8px;
            border-radius: 4px;
            background-color: #e9ecef;
        }
        
        .progress-bar {
            border-radius: 4px;
            background: linear-gradient(90deg, var(--primary-color) 0%, var(--success-color) 100%);
        }
        
        .footer {
            background-color: #343a40;
            color: white;
            padding: 2rem 0;
            margin-top: auto;
        }
        
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .question-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }
        
        .option-item {
            background: #f8f9fa;
            border: 2px solid transparent;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .option-item:hover {
            background: #e9ecef;
            border-color: var(--primary-color);
        }
        
        .option-item.selected {
            background: rgba(0, 123, 255, 0.1);
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        
        .result-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
        }
        
        .score-display {
            font-size: 3rem;
            font-weight: bold;
            margin: 1rem 0;
        }
        
        /* 确保响应式布局 */
        @media (max-width: 768px) {
            .main-container {
                padding: 1rem 0;
            }
            
            .question-card {
                padding: 1.5rem;
            }
            
            .score-display {
                font-size: 2rem;
            }
            
            .container {
                padding-left: 15px;
                padding-right: 15px;
            }
        }
        
        /* 修复可能的样式冲突 */
        .row {
            margin-left: -15px;
            margin-right: -15px;
        }
        
        .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
        .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
        .col-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, 
        .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, 
        .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto,
        .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, 
        .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, 
        .col-md-10, .col-md-11, .col-md-12, .col-md-auto,
        .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, 
        .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, 
        .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto,
        .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, 
        .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, 
        .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {
            padding-left: 15px;
            padding-right: 15px;
        }
    </style>
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('main.index') }}">
                <i class="bi bi-heart-pulse me-2"></i>
                心理测评平台
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.index') }}">
                            <i class="bi bi-house me-1"></i>首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('members.login') }}">
                            <i class="bi bi-person me-1"></i>会员登录
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-container">
        <div class="container">
            {% block content %}{% endblock %}
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>心理测评平台</h5>
                    <p class="mb-0">专业的心理健康评估工具，帮助您更好地了解自己。</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="mb-0">
                        <small class="text-muted">
                            © 2024 心理测评平台. 保留所有权利.
                        </small>
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    
    <!-- 通用JavaScript函数 -->
    <script>
        // API请求函数
        function apiRequest(url, options = {}) {
            const defaultOptions = {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
            };
            
            const mergedOptions = { ...defaultOptions, ...options };
            
            return fetch(url, mergedOptions)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .catch(error => {
                    console.error('API请求失败:', error);
                    throw error;
                });
        }
        
        // 显示结果消息
        function showResult(success, message, callback = null) {
            const alertClass = success ? 'alert-success' : 'alert-danger';
            const icon = success ? 'bi-check-circle-fill' : 'bi-exclamation-triangle-fill';
            
            const alertHtml = `
                <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                    <i class="${icon} me-2"></i>
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;
            
            // 查找或创建消息容器
            let messageContainer = document.getElementById('message-container');
            if (!messageContainer) {
                messageContainer = document.createElement('div');
                messageContainer.id = 'message-container';
                messageContainer.className = 'position-fixed top-0 start-50 translate-middle-x';
                messageContainer.style.zIndex = '9999';
                messageContainer.style.marginTop = '20px';
                document.body.appendChild(messageContainer);
            }
            
            messageContainer.innerHTML = alertHtml;
            
            // 自动隐藏
            setTimeout(() => {
                const alert = messageContainer.querySelector('.alert');
                if (alert) {
                    const bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }
                if (callback) callback();
            }, 3000);
        }
        
        // 显示加载状态
        function showLoading(element, text = '加载中...') {
            const originalContent = element.innerHTML;
            element.innerHTML = `
                <span class="loading-spinner me-2"></span>
                ${text}
            `;
            element.disabled = true;
            
            return function hideLoading() {
                element.innerHTML = originalContent;
                element.disabled = false;
            };
        }
        
        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }
        
        // 格式化时长
        function formatDuration(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            if (minutes > 0) {
                return `${minutes}分${remainingSeconds}秒`;
            } else {
                return `${remainingSeconds}秒`;
            }
        }
        
        // 平滑滚动到元素
        function scrollToElement(element) {
            element.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
        }
        
        // 添加淡入动画
        function addFadeInAnimation(element) {
            element.classList.add('fade-in');
        }
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>